<template>
  <table width="98%" border="1" class="table table-bordered">
    <tbody>
      <tr>
        <td>分类ID</td>
        <td>路径</td>
        <td>名称</td>
        <td>编辑</td>
        <td>删除</td>
      </tr>
      <tr v-for="(item, index) in category_select">
        <td>{{ item.catid }}</td>
        <td v-html="item.cat_pos"></td>
        <td>
          {{
            "&nbsp;&nbsp;&nbsp;&nbsp;".repeat(item.lev) +
            "┖─&nbsp;" +
            item.catname
          }}
        </td>
        <td>
          <el-button size="mini" @click="handleEdit(index, item)"
            >编辑</el-button
          >
        </td>
        <td>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(index, item)"
            >删除</el-button
          >
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: ["module", "add_url", "lst_url", "mod_url", "del_url", "preview_url"],
  data() {
    return {
      category_select: [],
    };
  },
  async mounted() {
    try {
      let data = await this.$axios.post(this.lst_url, {});
      if (parseInt(data.code) > 0) {
        this.category_select = data.data;
      } else {
        this.$message.error(data.msg);
      }
    } catch (error) {
      this.$message.error(error.toString());
    }
  },
  methods: {
    //编辑
    handleEdit(index, row) {
      this.$router.push({
        path: "/" + this.module + "/category_mod",
        query: { catid: row.catid },
      });
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("确定要删除吗？", "系统提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            let data = await this.$axios.post(this.del_url, {
              catid: row.catid,
            });
            if (parseInt(data.code) > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
                duration: 1000,
              });
              setTimeout(() => {
                location.reload();
              }, 1000);
            } else {
              this.$message({
                type: "error",
                message: data.msg,
              });
            }
          } catch (error) {
            this.$message.error(error.toString());
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
td {
  text-align: left;
}
</style>
